<script setup>
import { ref } from 'vue'
import {
  Iphone,
  Clock,
  Document,
  User,
  List,
  Expand,
  Watermelon,
  Pear
} from '@element-plus/icons-vue'
import { getInfoService } from '@/api/course.js'
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
const drawer = ref(false)
const courseInfo = ref([
  {
    id: '',
    publishStatus: '',
    auditStatus: '',
    auditMind: '',
    uploaderId: '',
    title: '',
    description: '',
    fileMd5: '',
    createDate: '',
    updateDate: '',
    mt: '',
    st: '',
    account: '',
    file: {
      id: '',
      uploaderId: '',
      uploaderName: '',
      fileName: '',
      url: '',
      fileSize: '',
      createDate: '',
      updateDate: ''
    }
  }
])
const open = async (id) => {
  const res = await getInfoService(id)
  courseInfo.value = res.data
  drawer.value = true
  options.value.src = courseInfo.value.url
}

//视频播放
const options = ref({
  width: '100%', //播放器高度
  height: '400px', //播放器高度
  color: '#409eff', //主题色
  muted: false, //静音
  webFullScreen: false,
  speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
  title: '', //视频名称
  src: 'http://vjs.zencdn.net/v/oceans.mp4', //视频源
  poster: '' //封面
})
const onPlay = () => {
  console.log('播放')
}
const onPause = (ev) => {
  console.log(ev, '暂停')
}

const onTimeupdate = (ev) => {
  console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
  console.log(ev, '可以播放')
}
defineExpose({
  open
})
</script>
<template>
  <el-drawer
    v-model="drawer"
    title="科普视频详情"
    direction="ltr"
    size="50%"
    :before-close="handleClose"
  >
    <el-descriptions
      class="margin-top"
      :title="courseInfo.title"
      :column="2"
      :size="size"
      direction="vertical"
      border
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            上传人账号
          </div>
        </template>
        {{ courseInfo.account }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <clock />
            </el-icon>
            创建时间
          </div>
        </template>
        {{ courseInfo.createDate }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Watermelon />
            </el-icon>
            视频相关分类
          </div>
        </template>
        {{ courseInfo.mt }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Pear />
            </el-icon>
            视频相关品种
          </div>
        </template>
        {{ courseInfo.st }}
      </el-descriptions-item>
      <el-descriptions-item width="50%">
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            审核状态
          </div>
        </template>
        {{
          courseInfo.auditStatus === '101'
            ? '审核通过'
            : courseInfo.auditStatus === '102'
            ? '审核失败'
            : '待审核'
        }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Expand />
            </el-icon>
            发布状态
          </div>
        </template>
        {{ courseInfo.publishStatus === '201' ? '未发布' : '已发布' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <document />
            </el-icon>
            审核意见
          </div>
        </template>
        {{ courseInfo.auditMind }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <list />
            </el-icon>
            科普视频描述
          </div>
        </template>
        {{ courseInfo.description }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <list />
            </el-icon>
            科普视频
          </div>
        </template>
        <div>
          <videoPlay
            v-bind="options"
            @play="onPlay"
            @pause="onPause"
            @timeupdate="onTimeupdate"
            @canplay="onCanplay"
          />
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<style>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
  width: 100px;
}
.margin-top {
  margin-top: 20px;
}
</style>
